<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>消费记录</title>
    <link rel="stylesheet" href="css/consume.css">
    <link rel="stylesheet" href="css/base.css">
    <script src="js/jquery-3.6.0.min.js"></script>
</head>
<body>
<div class="top">
    <span>网上借书系统</span>
    <div class="back">
        <a href="index.html">返回首页</a>
    </div>
</div>
<section>
<div class="head-up">
    <div class="up">
        消费类型：<input type="text" id="type">
        <button id="search">查询</button>
    </div>
    <div class="all" id="all">
        <a href="#">全部记录</a>
    </div>
</div>
    <div class="mid">
        <table >
            <thead>
            <tr>
                <th>id</th>
                <th>卡号</th>
                <th>价格</th>
                <th>时间</th>
                <th>类型</th>
            </tr>
            </thead>
            <tbody id="tab">

            </tbody>
        </table>
    </div>
</section>
</body>
<script>
    $("#all").click(function (){
        getM(10)
    })
    getM(10)
    $("#search").click(function (){
        if ($("#type").val() == "借书消费" || $("#type").val() == "借书"){
            getM(1)
        }else if($("#type").val() == "逾期消费" || $("#type").val() == "逾期"){
            getM(2)
        }else if($("#type").val() == "充值"){
            getM(0)
        }
    })
    $("#type").keydown(function (e){
        if(e.keyCode == 13){
            if ($("#type").val() == "借书消费" || $("#type").val() == "借书"){
                getM(1)
            }else if($("#type").val() == "逾期消费" || $("#type").val() == "逾期"){
                getM(2)
            }else if($("#type").val() == "充值"){
                getM(0)
            }
        }
    })
 function getM(type){
     $("#tab").empty()
     $.ajax({
         type:"get",
         url:"http://120.76.130.104:9000/user/getCostRecord",
         data:{
             type: type,
         },
         headers:{
             Token:localStorage.getItem("Token")
         },
         success:function (data,test,http){
             if(http.getResponseHeader("Token") == "" || http.getResponseHeader("Token") == null){
                 localStorage.clear()
                 window.location = "login.html"
             }else{
                 console.log(data.data)
                 for(let i =0; i < data.data.length; i++){
                     $("#tab").append(" <tr>\n" +
                         "                    <td>"+data.data[i].id+"</td>\n" +
                         "                    <td>"+data.data[i].cardNumber+"</td>\n" +
                         "                    <td>"+data.data[i].price+"</td>\n" +
                         "                    <td>"+data.data[i].time +"</td>\n" +
                         "                    <td>"+data.data[i].type +"</td>\n" +
                         "                </tr>")
                 }
                 let tab = document.getElementById("tab")
                 let trs = tab.getElementsByTagName("tr")

                 for(let i = 0;i < trs.length; i++){
                     if(i % 2 == 0){
                         trs[i].style.backgroundColor = "#f5f5f5"
                     }
                 }
             }
         }
     })
 }
</script>
</html>